//引入React
import React, { Component } from 'react';
//复选框属性及值
const data=[
     {
        label:"苹果",
        name:"苹果",
        checked:false,
    },
    {
        label:"榴莲",
        name:'苹果',
        checked:false,
    },{
        label:"香蕉",
        name:"香蕉",
        checked:false
    }
]
//书写组件
class DOM_A extends Component{
    //属性
    state={
        titile:"",//标题
        desc:"",//描述
        sex:"1",//男
        city:"上海",//地区
    }
    handleMsg = (e)=>{
        this.setState({
            title:e.target.value
        })
    }
    //描述信息
    handleDesc=(e)=>{
        this.setState({
            desc:e.target.value
        })
    }
    //更改性别
    handleSex=(e)=>{
        console.log(e)
        this.setState({
            sex:e.target.vlaue
        })
        console.log(this.state.sex)
    }
    //提交表单信息
    submitData=(e)=>{
        e.preventDefault()
    }

    //
    handleInput=(e,index)=>{
        if(e.target.type==="checkbox"){
            data[index].checked=!data[index].checked
        }
        let name=e.target.name
        let value=e.target.value
        this.setState({
            [name]:value
        })
        console.log('checkbox',data,this.state)
    }
    //复选城市
    handleSelectCity=(e)=>{
        console.log('city',e.target.value,this.state)
        this.setState({
            city:e.target.value
        })
        console.log(this.state)
    }

    //页面元素渲染
    render(){
        return(
            <div className='form'>
                <form onSubmit={this.submitData}>
                    <h2>案例-form表单相关集合</h2>
                    {/* 输入框 */}
                    <div className='item'>
                        <h3>6.1 input</h3>
                        <input value={this.state.title} placeholder="请输入活动名称" OnChange={this.handleMsg} /> 
                    </div>    
                    {/* 文本域 */}
                    <div className='item'>
                        <h2>textarea </h2>
                        <textarea name="" id="" cols="30" rows="10"></textarea>
                    </div>
                    {/* 复选框  */}
                    <div className="chexbox">
                        <h2>checkbox</h2>
                        喜欢的水果是：
                        {
                            data.map((item,key)=>{
                                return(
                                    <label key={key}>
                                        <input type="checkbox" checked={item.checked} name={item.name} onChange={(e) => this.handleInput(e, key)} />{item.label}
                                    </label>
                                )
                            })
                        }
                    </div>
                    {/* 输入框 */}
                    <div className="input_box">
                        手机号；
                        <label>
                            <input name="phone" placeholder='请输入手机号'  />   
                        </label>    
                    </div>
                    {/* 单选框 */}
                    <div className='item'>
                        <h2>radio</h2>
                        性别：
                        <label>
                            <input type="radio" value='1' checked={this.state.sex==='1'} onChange={this.handleSex}  />男
                        </label>
                        <label>
                            <input type="radio" value='2' checked={this.state.sex==='2'} onChange={this.handleSex} />女
                        </label>
                        
                    </div>
                    {/* 下拉菜单 */}
                    <div className="select">
                        <h2>下拉菜单 selsect</h2>
                        <select vlaue={this.state.city} onChange={this.handleSelectCity}>
                            <option vlaue="北京">北京</option>   
                            <option vlaue="上海">上海</option>    
                            <option vlaue="邯郸">邯郸</option>    
                            <option vlaue="重庆">重庆</option>    
                        </select>    
                    </div>
                </form>
            </div>
        )
    }
}

//导出我们书写的组件

export default DOM_A
   